import React, {useState, useEffect} from 'react'
import qs from 'qs'

const wls = window.localStorage

interface OperBtnProps {
  active?: any
  value?: any
  note?: any
  api?: any
  className?: any
  method?: any
  articleId?: any
  iconSrc?: any
  iconStyle?: any
  textStyle?: any
  style?: any
}

export default function OperBtn(props: OperBtnProps) {
  const [active, setActive] = useState(props.active)
  const [value, setValue] = useState(props.value)

  useEffect(() => {
    setActive(props.active)
    setValue(props.value)
  }, [props.active, props.value])

  const handleClick = (e: any) => {
    e.stopPropagation()
    console.log(`[${props.note}]`, props);
    /*axios({
      url: props.api,
      method: props.method ? props.method : 'get',
      headers: {'Content-Type': 'application/x-www-form-urlencoded'},
      params: {
        token: wls.XB_token,
      },
      data: qs.stringify({
        id: props.articleId
      })
    }).then(res => {
      if (res.data.code !== 'SUCCESS') {
        console.log(`${props.note}失败: `, res.data.message);
        return;
      }
      const data = res.data.data
      console.log(active ? `取消${props.note}成功: ` : `${props.note}成功: `, data);
      for (let key in data) {
        if (/Bool$/.test(key))
          setActive(data[key])
        if (/Count$/.test(key))
          setValue(data[key])
      }
    }).catch(err => {
      console.log(err);
    })*/
  }

  return (
    <span
      className={props.className ? props.className : 'com-oper_icon-box'}
      style={{display: 'flex', alignItems: 'center', cursor: 'pointer', ...props.style}}
      onClick={(e) => {
        handleClick(e)
      }}
    >
      <img
        className='com-oper_icon'
        src={active ? props.iconSrc[1] : props.iconSrc[0]} alt="功能图标"
        style={{width: '28px', height: '28px', marginRight: '10px', ...props.iconStyle}}
      />
      <span
        className='com-oper_text'
        style={{color: '#999', ...props.textStyle}}
      >{value}</span>
  </span>
  )
}

